<template>
    <el-dialog
        class="cp-container"
        title="报告详情" width="70rem"
        :close-on-click-modal="false"
        :visible.sync="show">
        <div class="container">
            <table
                class="my-table-1"
                cellpadding="0" cellspacing="0"
                border="1">
                <tr>
                    <td
                        class="table-title"
                        align='center'
                        colspan="10">
                        中国石油西南油气田分公司勘探开发研究院分析实验中心
                    </td>
                </tr>
                <tr>
                    <td
                        class="table-title"
                        align='center'
                        colspan="10">
                        {{dataInfo.report.reportTitle}}
                    </td>
                </tr>
                <tr>
                    <th
                        height="0"
                        :width="100/10+'%'"
                        v-for="item in 10"
                        :key="item">
                    </th>
                </tr>
                <tr>
                    <td colspan="1">井 号：</td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.wellNo">
                        </el-input>
                    </td>
                    <td colspan="1">分析批号：</td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.analyid">
                        </el-input>
                    </td>
                    <td colspan="1">分析日期：</td>
                    <td colspan="3">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.analyDate">
                        </el-input>
                    </td>
                    <td colspan="2">共1页 第1页</td>
                </tr>
                <tr>
                    <td rowspan="3">中心编号</td>
                    <td rowspan="3">样品号</td>
                    <td rowspan="3">取样地点</td>
                    <td rowspan="3">层位</td>
                    <td rowspan="3">井深(m)</td>
                    <td rowspan="3">样品名称</td>
                    <td rowspan="3">制样编号</td>
                    <td rowspan="2">δD_s_m_o_w</td>
                    <td rowspan="2">δ^1^3C_P_D_B</td>
                    <td rowspan="1">标样MethaneCH4</td>
                </tr>
                <tr>
                    <td colspan="1"></td>
                </tr>
                    <td colspan="1">( ‰)</td>
                    <td colspan="1">( ‰)</td>
                    <td colspan="1">备   注</td>
                <tr>
                </tr>
                <tr>
                    <td colspan="1" :rowspan="dataInfo.isotope.length">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.conentid">
                        </el-input>
                    </td>
                    <td colspan="1" :rowspan="dataInfo.isotope.length">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.analyMan">
                        </el-input>
                    </td>
                    <td colspan="1" :rowspan="dataInfo.isotope.length">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.analyMan">
                        </el-input>
                    </td>
                    <td colspan="1" :rowspan="dataInfo.isotope.length">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.horizon">
                        </el-input>
                    </td>
                    <td colspan="1" :rowspan="dataInfo.isotope.length">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.wellDepth">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.isotope[0].sampleName">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.isotope[0].makesampleid">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.isotope[0].vsmow">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.isotope[0].cpdb">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.isotope[0].remark">
                        </el-input>
                    </td>
                </tr>
                <tr 
                    v-for="(item,index) in dataInfo.isotope.slice(1)"
                    :key="index">
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="item.sampleName">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="item.makesampleid">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="item.vsmow">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="item.cpdb">
                        </el-input>
                    </td>
                    <td colspan="1">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="item.remark">
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">分析人：</td>
                    <td colspan="3">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.analyMan">
                        </el-input>
                    </td>
                    <td colspan="2">校验人：</td>
                    <td colspan="3">
                        <el-input
                            placeholder=""
                            :disabled="!canEdit"
                            v-model="dataInfo.report.checkMan">
                        </el-input>
                    </td>
                </tr>
            </table>
            <div class="other-container">
                <div class="el-list">
                    <el-radio v-model="dataInfo.report.isbasic" :label="0">临时数据</el-radio>
                    <el-radio v-model="dataInfo.report.isbasic" :label="1">基础数据</el-radio>
                </div>
                <el-input
                    placeholder="请输入构造"
                    v-model="dataInfo.report.structure">
                </el-input>
                <el-input
                    placeholder="请输入层位确认"
                    v-model="dataInfo.report.horizonConfirm">
                </el-input>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button 
                :loading="loading"
                type="primary" 
                @click="onSubmit">
                修 改
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
/*
 天然气报告详情
 */
export default {
    data() {
        return {
            show:false,
            loading:false,
            canEdit:true,  //能修改
            reportData:{},
            dataInfo:{
                isotope:[{}],
                report:{},
            },
        };
    },
    methods: {
        initData({show,data={}}={}){  //初始化数据
            this.reportData = {};
            this.dataInfo = {
                isotope:[{}],
                report:{},
            };
            this.show = !!show;
            this.$nextTick(()=>{
                this.reportData = JSON.parse(JSON.stringify(data));
                this.getData();
            });
        },
        getData(){
            this.loading = true;
            this.$Api.getReport({
                params:{
                    reportNo:this.reportData.reportNo,
                    conentid:this.reportData.conentid,
                    reportType:this.reportData.reportType,
                },
            }).then(res=>{
                this.dataInfo = res.data || this.dataInfo;
            }).catch((res)=>{
                this.$message({
                    message: res.msg,
                    type: 'error',
                });
            }).finally(()=>{
                this.loading = false;
            });
        },
        onSubmit() {
            this.loading = true;
            this.$Service.post(
                this.$Api.reportUpdate,
                this.dataInfo,
            ).then((data) => {
                this.show = false;
                this.$message({
                    message: data.msg,
                    type: 'success'
                });
                this.$emit('success',data);
            }).finally(() => {
                this.loading = false;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.cp-container{
    box-sizing: border-box;
    /deep/.container{
        margin-bottom: 1rem;
        >table{
            width: 100%;
            height: fit-content;
            td{
                padding: 1rem 0.2rem;
                text-align: center;
                font-size: 14px;
                box-sizing: border-box;
                color: #36424e;
            }
            .table-title{
                font-size: 1.3rem;
                color: #36424e;
                padding: 1rem;
                font-weight: bold;
            }
            input{
                width: 100%;
                border: none;
                padding: 0 !important;
                height: 20px;
                line-height: 20px;
            }
            .is-disabled{
                input{
                    background-color: white !important;
                }
            }
        }
        .other-container{
            margin-top: 1rem;
            display: grid;
            grid-gap: 1rem;
            >.el-list{
                display: flex;
            }
        }
    }
}
</style>